import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap";
import * as dat from "dat.gui";
// DOING:引入着色器和加载器
import vertexShader from "../shaders/flylight/vertex.glsl";//INFO:引入片元着色器
import fragmentShader from "../shaders/flylight/fragment.glsl";//INFO:引入顶点着色器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";//INFO:引入RGBELoader环境纹理加载
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";//INFO:GLTF加载器（GLTFLoader）
// 目标：认识shader

//创建gui对象
const gui = new dat.GUI();

// console.log(THREE);
// 初始化场景
const scene = new THREE.Scene();

// 创建透视相机
const camera = new THREE.PerspectiveCamera(
  90,
  window.innerHeight / window.innerHeight,
  0.1,
  1000
);
// 设置相机位置
// object3d具有position，属性是1个3维的向量
camera.position.set(0, 0, 2);
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
//   更新摄像机的投影矩阵
camera.updateProjectionMatrix();
scene.add(camera);

// 加入辅助轴，帮助我们查看3维坐标轴
/* const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper); */

// 加载纹理



// // 创建着色器材质;
// const shaderMaterial = new THREE.ShaderMaterial({
//   vertexShader: vertexShader,
//   fragmentShader: fragmentShader,
//   side: THREE.DoubleSide,
//   transparent: true,
// });
// console.log(shaderMaterial);

// // new THREE.MeshBasicMaterial({ color: "#00ff00" })
// // 创建平面
// const floor = new THREE.Mesh(
//   new THREE.PlaneBufferGeometry(1, 1, 64, 64),
//   shaderMaterial
// );

// console.log(floor,new THREE.PlaneBufferGeometry(1, 1, 64, 64));
// scene.add(floor);
// 2.DOING:创建纹理加载器
const rgbeLoader = new RGBELoader()
// INFO:异步加载loadAsync
rgbeLoader.loadAsync("./assets/2k.hdr").then(texture => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture
  scene.environment = texture
})
// 3.DOING:创建着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  uniforms: {},
  side: THREE.DoubleSide,
  // transparent: true
})
// scene.add(shaderMaterial)
// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ alpha: true });
// renderer.shadowMap.enabled = true;
// renderer.shadowMap.type = THREE.BasicShadowMap;
// renderer.shadowMap.type = THREE.VSMShadowMap;
// 4.DOING:使用gltfLoader创建物体
const gltfLoader = new GLTFLoader();
gltfLoader.load("./assets/model/flyLight.glb", (gltf) => {
  console.log("GLTF", gltf);
  const LightBox = gltf.scene.children[1]
  const LightDT = gltf.scene.children[2]
  LightBox.material = shaderMaterial
  for (let i = 0; i < 200; i++) {
    let flyLight = gltf.scene.clone(true)
    // INFO:设置随机生成坐标
    let x = (Math.random() - 0.5) * 400
    let z = (Math.random() - 0.5) * 400
    let y = Math.random() * 60 + 25
    flyLight.position.set(x, y, z)
    // INFO:设置灯移动动画
    gsap.to(flyLight.position, {
      y: 2 * Math.PI,
      duration: 10 + Math.random() * 30,
      repeat: -1,
    })
    gsap.to(flyLight.position, {
      y: "+=" + Math.random() * 30,
      x: "+=" + Math.random() * 10,
      duration: 10 + Math.random() * 30,
      repeat: -1,
    })
    scene.add(flyLight)
  }

})
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// INFO:设置渲染器效果
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
// renderer.toneMapping = THREE.LinearToneMapping;
// renderer.toneMapping = THREE.ReinhardToneMapping;
// renderer.toneMapping = THREE.CineonToneMapping;
renderer.toneMappingExposure = 0.2;

// 监听屏幕大小改变的变化，设置渲染的尺寸
window.addEventListener("resize", () => {
  //   console.log("resize");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比例
  renderer.setPixelRatio(window.devicePixelRatio);
});

// 将渲染器添加到body
document.body.appendChild(renderer.domElement);

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping = true;
// 设置自动旋转
// controls.autoRotate = true;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.1;
// INFO:设置角度
controls.maxPolarAngle = (Math.PI / 3) * 2;
controls.minPolarAngle = (Math.PI / 3) * 2;

const clock = new THREE.Clock();
function animate(t) {
  const elapsedTime = clock.getElapsedTime();
  requestAnimationFrame(animate);
  // 使用渲染器渲染相机看这个场景的内容渲染出来
  renderer.render(scene, camera);
}

animate();
